<%-- 
    Document   : adminViewASection
    Created on : Nov 11, 2013, 9:15:21 PM
    Author     : mokoe001
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View A Section</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style type="text/css">
            tr, td, table{
                border: solid 1px;
            }
        </style>

        <script type="text/javascript">
            var prevChkbxIdCourse = "";
            var prevChkbxIdProf = "";
            //toggling for course check boxes
            function toggleCourse(chkBx) {//make sure only one checkbox is selected
                //  alert("he");
                if (prevChkbxIdCourse !== "" && prevChkbxIdCourse !== chkBx.id) {
                    document.getElementById(prevChkbxIdCourse).checked = false;
                }

                prevChkbxIdCourse = chkBx.id;
            }

            //toggling for prof check boxes
            function toggleProf(chkBx) {

                if (prevChkbxIdProf !== "" && prevChkbxIdProf !== chkBx.id) { //do not do this on first check
                    document.getElementById(prevChkbxIdProf).checked = false;
                }
                prevChkbxIdProf = chkBx.id;
            }

            function editMode(button) {
                if (button.value === "Activate Edit Mode") {
                    document.getElementById(button.id).value = "De-activate Edit Mode";

                    //remove readOnly from textboxes
                    var textNodeList = document.getElementsByClassName("textInput");
                    for (var i = 0; i < textNodeList.length; i++) {
                        textNodeList[i].removeAttribute("readOnly");
                    }
                    //enable all checkBoxes
                    var chkBxNodeList = document.getElementsByClassName("checkBxInput");
                    for (var i = 0; i < chkBxNodeList.length; i++) {
                        chkBxNodeList[i].removeAttribute("disabled");
                        if (chkBxNodeList[i].checked) {
                             var id = chkBxNodeList[i].id;
                              
                              var split = id.split("_");
                              if(split[0]==="course"){
                                  prevChkbxIdCourse = id;
                              }
                              else if(split[0]==="professor"){
                                  prevChkbxIdProf = id;
                              }                              
                        }
                    }
                    
                      //enable all select inputs
                    var selectNodeList = document.getElementsByClassName("selectInput");
                    for (var i = 0; i < selectNodeList.length; i++) {
                        selectNodeList[i].removeAttribute("disabled");
                    }
                    
                    
                } else {
                    document.getElementById(button.id).value = "Activate Edit Mode";
                    
                     //readOnly for all textboxes
                    var textNodeList = document.getElementsByClassName("textInput");
                    for (var i = 0; i < textNodeList.length; i++) {
                        textNodeList[i].setAttribute("readOnly", "readOnly");
                    }
                    //disable all checkBoxes
                    var chkBxNodeList = document.getElementsByClassName("checkBxInput");
                    for (var i = 0; i < chkBxNodeList.length; i++) {
                        chkBxNodeList[i].setAttribute("disabled","disabled");                       
                    }
                    
                      //enable all select inputs
                    var selectNodeList = document.getElementsByClassName("selectInput");
                    for (var i = 0; i < selectNodeList.length; i++) {
                        selectNodeList[i].setAttribute("disabled","disabled");
                    }
                }
            }
        </script>

    </head>
    <body>
        <h3>View a Section</h3>

        <input id ="editModeButton" type="button" value="Activate Edit Mode" onclick="editMode(this);" />
        <br> <br>

        <form id="inputFrm" method="post" action="adminSection">               
            <!--<label for="sectionId">Section ID:</label>
            <input type="text" name="courseId" />     <br><br> -->


            <label for="sectionName">Section Name:</label>
            <input class="textInput" type="text" name="sectionName" value="${section.getSectionName()}" 
                   readOnly="readOnly"/> <br><br>
            <label for="courses">Select a Course:</label><br>
            <table name="courses">
                <th>Select</th>
                <th>Course List</th>
                <!--add courses with a checkbox -->
                <c:forEach items="${courses}" var="course">                                     
                    <tr>        
                        <td>

                            <c:choose>
                                <c:when test="${course.getCourseId()==section.getCourse().getCourseId()}">                               
                                    <input class="checkBxInput" type="checkbox" name="course_${course.getCourseId()}" 
                                           id="course_${course.getCourseId()}" onclick="toggleCourse(this);" 
                                           disabled="disabled" checked/>
                                </c:when>
                                <c:otherwise>
                                    <input class="checkBxInput" type="checkbox" name="course_${course.getCourseId()}" 
                                           id="course_${course.getCourseId()}" onclick="toggleCourse(this);" 
                                           disabled="disabled"/>
                                </c:otherwise>

                            </c:choose>      

                        </td> 
                        <td><a>${course.getCourseCode()} -  ${course.getCourseName()}</a></td>
                    </tr>     
                </c:forEach>

                <input type="hidden" id="selectedCourse" name="selectedCourse" value="" />               
            </table>

            <br>
            <label for="professor">Select Professor</label><br>
            <table name="professor">
                <th>Select</th>
                <th>Professor List</th>
                    <c:forEach items="${professors}" var="professor">                                     
                    <tr>        
                        <td>
                            <!-- if the checkbox is selected then check it -->
                            <c:choose>
                                <c:when test="${professor.getUserId() == section.getProfessor().getUserId()}">                               
                                    <input class="checkBxInput" type="checkbox" name="professor_${professor.getUserId()}"
                                           id="professor_${professor.getUserId()}" onclick="toggleProf(this);"
                                           disabled="disabled" checked/> 
                                </c:when>
                                <c:otherwise>
                                    <input class="checkBxInput" type="checkbox" name="professor_${professor.getUserId()}"
                                           id="professor_${professor.getUserId()}" onclick="toggleProf(this);"
                                           disabled="disabled"/>
                                </c:otherwise>

                            </c:choose>                             
                        </td> 
                        <td><a>${professor.getFirstName()}   ${professor.getLastName()}</a></td>
                    </tr>     
                </c:forEach>

                <input type="hidden" id="selectedProfessor" name="selectedProfessor" value="" />               

            </table>
            <br>
            <br>

            <label>Schedule</label>

            <label for="scheduleId">Schedule WeekDay:</label>
            <select class="selectInput" name="weekDay" disabled>
                <option value="Monday">Monday</option>  
                <option value="Tuesday">Tuesday</option>
                <option value="Wednesday">Wednesday</option>
                <option value="Thursday">Thursday</option>
                <option value="Friday">Friday</option>
            </select>

            <br><br>

            <label for="roomNum">Room Number:</label>
            <input class="textInput" type="text" name="roomNum" value="${section.getSchedule().getRoomNbr()}" readonly="readOnly" />     <br><br>
            <label>Start time: </label>
            <label>HH</label>
            <select class="selectInput" name="startHour" disabled>
                <option value="00">00</option>  <option value="01">01</option> <option value="02">02</option>
                <option value="03">03</option>  <option value="04">04</option> <option value="05">05</option>
                <option value="06">06</option>  <option value="07">07</option> <option value="08">08</option> 
                <option value="09">09</option>  <option value="10">10</option> <option value="11">11</option>
                <option value="12">12</option>  <option value="13">13</option> <option value="14">14</option>
                <option value="15">15</option>  <option value="16">16</option> <option value="17">17</option> 
                <option value="18">18</option>  <option value="19">19</option> <option value="20">20</option> 
                <option value="21">21</option>  <option value="22">22</option> <option value="23">23</option>                 
            </select>

            <label>MM</label>
            <select class="selectInput" name="startMinute" disabled>
                <option value="00">00</option>  <option value="05">05</option> <option value="10">10</option>
                <option value="15">15</option>  <option value="20">20</option> <option value="25">25</option>
                <option value="30">30</option>  <option value="35">35</option> <option value="40">40</option> 
                <option value="45">45</option>  <option value="50">50</option> <option value="55">55</option>

            </select>
            <br>
            <br>
            <label>End time: </label>
            <label>HH</label>
            <select class="selectInput" name="endHour" disabled>
                <option value="00">00</option>  <option value="01">01</option> <option value="02">02</option>
                <option value="03">03</option>  <option value="04">04</option> <option value="05">05</option>
                <option value="06">06</option>  <option value="07">07</option> <option value="08">08</option> 
                <option value="09">09</option>  <option value="10">10</option> <option value="11">11</option>
                <option value="12">12</option>  <option value="13">13</option> <option value="14">14</option>
                <option value="15">15</option>  <option value="16">16</option> <option value="17">17</option> 
                <option value="18">18</option>  <option value="19">19</option> <option value="20">20</option> 
                <option value="21">21</option>  <option value="22">22</option> <option value="23">23</option>                 
            </select>

            <label>MM</label>
            <select class="selectInput" name="endMinute" disabled>
                <option value="00">00</option>  <option value="05">05</option> <option value="10">10</option>
                <option value="15">15</option>  <option value="20">20</option> <option value="25">25</option>
                <option value="30">30</option>  <option value="35">35</option> <option value="40">40</option> 
                <option value="45">45</option>  <option value="50">50</option> <option value="55">55</option>

            </select>                    
            <br>
            <br>

            <label>Semester type: </label>
            <select class="selectInput" name="semesterType" disabled>
                <option value="Fall">Fall</option>
                <option value="Spring">Spring</option>
                <option value="Summer A">Summer A</option>
                <option value="Summer B">Summer B</option>
                <option value="Summer C">Summer C</option>
            </select>
            <br><br>
            <label>Semester Start Year</label>
            <select class="selectInput" name="semesterStartYear" disabled>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
            </select> <br><br>
            <label name="semesterEndYear">Semester End Year</label>

            <select class="selectInput" name="semesterStartYear" disabled>              
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
            </select>
            <br><br>

            <br><br>
            <input type="submit" value="Submit" />
            <input type="button" value="Cancel" />
            <input type="hidden" name="tasktype" value="addSection" /> 
        </form>

    </body>
</html>
